<template>
  <view class="role-switch-container">
    <!-- 半透明背景遮罩 -->
    <view class="mask" @click="closeModal"></view>
    
    <!-- 角色选择弹窗 -->
    <view class="modal">
      <!-- 标题栏 -->
      <view class="modal-header">
        <text class="title">角色切换</text>
        <uni-icons type="close" size="20" color="#999" @click="closeModal" />
      </view>
      
      <!-- 角色列表 -->
      <view class="role-list">
        <view class="role-item active" @click="selectRole('发展辅导员角色')">
          <text class="role-name">发展辅导员角色</text>
        </view>
        <view class="role-item" @click="selectRole('发展学院角色')">
          <text class="role-name">发展学院角色</text>
        </view>
        <view class="role-item" @click="selectRole('发展管理员角色')">
          <text class="role-name">发展管理员角色</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 页面加载时确认
onLoad(() => {
  console.log('角色切换页面已加载')
})

const currentRole = ref('发展辅导员角色')

// 角色与页面路径的映射关系
const roleRoutes = {
  '发展辅导员角色': '/pages/index/index',
  '发展学院角色': '/page2/check/check',
  '发展管理员角色': '/pages/admin/index'
}

// 角色选择并跳转对应页面
const selectRole = (role) => {
  console.log('选择角色:', role)
  currentRole.value = role
  
  // 显示切换提示
  uni.showToast({
    title: `已切换为${role}`,
    icon: 'none',
    duration: 1500
  })
  
  // 根据角色跳转到对应页面
  setTimeout(() => {
    const targetPath = roleRoutes[role]
    if (targetPath) {
      // 跳转到对应角色页面并关闭当前页面
      uni. switchTab({
        url: targetPath,
        fail: (err) => {
          console.error('页面跳转失败:', err)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    } else {
      console.error('未找到角色对应的页面路径')
      uni.showToast({
        title: '配置错误',
        icon: 'none'
      })
    }
  }, 1500)
}

// 关闭按钮逻辑
const closeModal = () => {
  console.log('关闭角色切换弹窗')
  uni.navigateBack()
}
</script>

<style scoped>
/* 保持原有样式不变 */
.role-switch-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding-bottom: 20px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.role-list {
  padding: 16px;
}

.role-item {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid #e5e5e5;
  touch-action: manipulation;
}

.role-item:active {
  background-color: #f5f5f5;
}

.role-item.active {
  background-color: #e54d42;
  border-color: #e54d42;
}

.role-name {
  font-size: 16px;
}

.role-item.active .role-name {
  color: #fff;
  font-weight: 500;
}

.role-item:not(.active) .role-name {
  color: #333;
}
</style>